<template>
  <div v-if="viewModel">
    <el-form-item label="x/y轴起点:" required>
      <span class="title"> x轴:</span>
      <el-input-number :min="0" :max="2160" v-model="viewModel.x" size="mini"></el-input-number>
      <span class="title"> y轴:</span>
      <el-input-number :min="0" :max="4096" v-model="viewModel.y" size="mini"></el-input-number>
      <div class="sale-intro">画布x轴起点和画布y轴起点,也就是画布离左上角的距离。默认为0，单位px</div>
    </el-form-item>
    <el-form-item label="画布宽度/长度">
      <span class="title"> 宽度:</span>
      <el-input-number :min="0" :max="2160" v-model="viewModel.width" size="mini"></el-input-number>
      <span class="title"> 高度:</span>
      <el-input-number :min="0" :max="4096" v-model="viewModel.height" size="mini"></el-input-number>
      <div class="sale-intro">画布的宽度和高度，单位px</div>
    </el-form-item>
  </div>
</template>
<script>
  import ala from 'ala'
export default {
    model: {
      prop: 'dataModel',
      event: 'change'
    },
    props: {
      dataModel: {},
      title: {}
    },
    data () {
      return {
        viewModel: null,
        dialogVisible: false
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.viewModel = this.dataModel
      },
      getTypeName (type) {
        if (type === 3) {
          return '图片'
        }
        if (type === 2) {
          return '文本'
        }
        if (type === 1) {
          return '二维码'
        }
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.viewModel.typeName = this.getTypeName(this.viewModel.type)
          this.$emit('change', this.viewModel)
        }
      }
    }
  }
</script>

